<template>
  <div id="questions">
    <van-sticky>
      <ul class="btn">
        <li
          v-for="(item, index) in navTab"
          :key="index"
          @click="handleClick(index)"
          :class="{ active: index === activeNum }"
        >
          {{ item }}
        </li>
      </ul>
    </van-sticky>
    <!-- //绑定多个 -->
    <!-- v-model:loading="state.loading"
        v-model:refreshing="state.refreshing" -->
    <keep-alive>
      <div class="qu_rec" v-if="activeNum === 0">
        <!-- <ul></ul> -->
        <van-pull-refresh
          @refresh="onRefresh"
          v-model:loading="state.loading"
          v-model:refreshing="state.refreshing"
        >
          <van-list
            v-model:loading="state.loading"
            :finished="state.finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="200"
            :immediate-check="false"
            loading-text="加载中"
          >
            <div
              class="talk"
              v-for="(item, index) in questionsData"
              :key="index"
            >
              <div class="t1">
                <img :src="item.userhead" alt="" />
                <div class="t1_2">
                  <p>匿名</p>
                  <i>来自Android客户端</i>
                </div>
              </div>
              <div class="t2">
                <h3>社交很无力怎么办</h3>
              </div>
              <div class="t3">
                <p>
                  我好像从来都跟室友处不好关系，高一跟室友因为玩笑吵过架，
                  高二也是因为一些原因跟其他两个室友关系不好（还好是六人间）
                  大学是四
                </p>
              </div>

              <div class="t4">
                <p class="p1"><span>#</span>工作的那些事儿</p>
                <p class="p2">
                  <img
                    src="../../assets/img/questions/矢量智能对象@2x(1).png"
                    alt=""
                  /><em>1</em>
                </p>
                <p class="p3">
                  <img
                    src="../../assets/img/questions/矢量智能对象@2x(2).png"
                    alt=""
                  /><em>7</em>
                </p>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
        <!-- end -->
      </div>
    </keep-alive>

    <!-- 2 -->
    <keep-alive>
      <div v-if="activeNum === 1" class="qu_rec" style="height: 600px">
        <div
          class="talk"
          v-for="(item, index) in questionsData.slice(1, 2)"
          :key="index"
        >
          <div class="t1">
            <img :src="item.userhead" alt="" />
            <div class="t1_2">
              <p>匿名</p>
              <i>来自Android客户端</i>
            </div>
          </div>
          <div class="t2">
            <h3>社交很无力怎么办</h3>
          </div>
          <div class="t3">
            <p>
              我好像从来都跟室友处不好关系，高一跟室友因为玩笑吵过架，
              高二也是因为一些原因跟其他两个室友关系不好（还好是六人间）
              大学是四
            </p>
          </div>

          <div class="t4">
            <p class="p1"><span>#</span>工作的那些事儿</p>
            <p class="p2">
              <img
                src="../../assets/img/questions/矢量智能对象@2x(1).png"
                alt=""
              /><em>1</em>
            </p>
            <p class="p3">
              <img
                src="../../assets/img/questions/矢量智能对象@2x(2).png"
                alt=""
              /><em>7</em>
            </p>
          </div>
        </div>
      </div>
    </keep-alive>

    <!-- 3 -->
    <div v-if="activeNum === 2" class="qu_rec">
      <div class="talk" v-for="(item, index) in questionsData" :key="index">
        <div class="t1">
          <img :src="item.userhead" alt="" />
          <div class="t1_2">
            <p>匿名</p>
            <i>来自Android客户端</i>
          </div>
        </div>
        <div class="t2">
          <h3>社交很无力怎么办</h3>
        </div>
        <div class="t3">
          <p>
            我好像从来都跟室友处不好关系，高一跟室友因为玩笑吵过架，
            高二也是因为一些原因跟其他两个室友关系不好（还好是六人间） 大学是四
          </p>
        </div>

        <div class="t4">
          <p class="p1"><span>#</span>工作的那些事儿</p>
          <p class="p2">
            <img
              src="../../assets/img/questions/矢量智能对象@2x(1).png"
              alt=""
            /><em>1</em>
          </p>
          <p class="p3">
            <img
              src="../../assets/img/questions/矢量智能对象@2x(2).png"
              alt=""
            /><em>7</em>
          </p>
        </div>
      </div>
    </div>
    <van-sticky>
      <div class="write">
        <img src="../../assets/img/questions/pic4.png" alt="" />
      </div>
    </van-sticky>
  </div>
</template>

<script>
import { onMounted, ref, computed, reactive } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const activeNum = ref(0);

    const navTab = ["推荐", "最新", "关注"];
    const handleClick = (i) => {
      activeNum.value = i;
    };

    // 问答
    const store = useStore();

    const fn = () => store.dispatch("getQuestionAsync");
    const questionsData = computed(() => {
      return store.state.question.data;
    });

    // jiequ
    const state = reactive({
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      start: 0,
    });
    onMounted(() => fn({ start: state.start }));
    // 下拉加载
    const onLoad = () => {
      setTimeout(async () => {
        await fn({ start: state.start });
        state.loading = false;
        if (state.refreshing) {
          questionsData.value = [];
          state.refreshing = false;
        }
        // console.log(store.state.question.data.length);
        if (questionsData.value.length >= 8) {
          state.finished = true;
        }
      }, 1000);
    };

    const onRefresh = () => {
      // 清空列表数据
      state.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      state.loading = true;
      onLoad();
    };

    return {
      onLoad,
      state,
      activeNum,
      navTab,
      handleClick,
      questionsData,
      onRefresh,
    };
  },
};
</script>

<style lang="less" scoped>
#questions {
  padding-bottom: 290px;
  box-sizing: content-box;
  position: relative;
  .btn {
    width: 100%;
    height: 77px;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;

    li {
      width: 115px;
      height: 33px;
      background: #f5f5f7;
      text-align: center;
      line-height: 33px;
      color: #8c8c8c;
      &:nth-of-type(1) {
        border-radius: 5px 0px 0px 5px;
      }
      &:nth-of-type(31) {
        border-radius: 0px 5px 5px 0px;
      }
    }
    .active {
      background: #1ca0f2;
      color: #ffffff;
    }
  }
  .qu_rec {
    background-color: #f5f5f7;
    position: absolute;
    width: 100%;
    padding-bottom: 90px;

    .talk {
      width: 348px;

      height: 204px;
      background: #ffffff;
      border: 1px solid #efefef;
      border-radius: 10px;
      margin: 15px 14px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      .t1 {
        height: 33px;
        width: 150px;
        display: flex;
        margin: 13px 17px;
        > img {
          margin-right: 3px;
          width: 30px;
          height: 30spx;
          border-radius: 50%;
        }
        .t1_2 {
          width: 110px;
          height: 30px;
          display: flex;
          flex-direction: column;
          text-align: left;

          p {
            font-weight: bold;
            margin-top: 4px;
          }
          i {
            color: #a8a8a8;
          }
        }
      }
      .t2 {
        width: 150px;
        height: 16px;
        margin-left: 13px;
        h3 {
          font-size: 17px;
          font-weight: bold;
          color: #231e22;
        }
      }
      .t3 {
        margin-left: 12px;
        margin-top: 10px;
        width: 300px;
        line-height: 18px;
        p {
          font-weight: 400;
          color: #575757;

          font-size: 13px;
        }
      }
      .t4 {
        width: 100%;
        height: 25px;
        display: flex;
        margin-left: 13px;
        margin-top: 22px;
        .p1 {
          width: 60%;
          height: 21px;
          font-weight: bold;
          font-size: 10px;
          font-weight: bold;
          color: #faaa6b;
          line-height: 25px;

          span {
            font-size: 12px;

            color: #faaa6b;
          }
        }
        .p2,
        .p3 {
          width: 20%;
          line-height: 35px;
          > img {
            width: 15px;
            height: 15px;
            margin-right: 7px;
          }
        }
      }
    }
    //end
  }
  .write {
    img {
      width: 53px;
      height: 53px;
      position: fixed;
      bottom: 118px;
      right: 23px;
    }
  }
}
</style>
